<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>工资计算器</h1>
      <label>总工资：<input type="text" v-model="wages" id="" /></label> <br>

        <template  v-if="wages>6150">
          <span>养老保险：8%</span>    <span>￥{{Pension}}</span> <br>
      <span>医疗保险：2%</span>      <span>￥{{yiliao}}</span>   <br>
      <span>失业保险：0.5%</span>         <span>￥{{shiye}}</span>  <br>
      <span>生育保险：0%</span>       <span>￥0</span>  <br>
      <span>工伤保险：0%</span>          <span>￥0</span>   <br>
      <span>住房公积金：8%</span>        <span>￥{{Pension}}</span>   <br>
      <p>个人税：{{shui}}</p>
      <p>税前工资:{{kouchusanxian}}</p>
      <p  >税后工资:{{kouchusanxian-geshui}}</p>
        </template>
        <template v-else>
          <div>工资低于6150不用交税</div>
        </template>

      


    </div>
    <script>
      let app = new Vue({
        el: "#app",
        data: {
          wages: "",
          Pension: '',
          yiliao:'',
          shiye:'',
          geshui:'',
          
          kouchusanxian:'',
          shuihou:''
        },
        computed: {
          shui() {
            var gongzi = this.wages
            var jizhun;
            if (gongzi > 7662) {
              jizhun = 7662;
            } else {
              jizhun = gongzi;
            }

            this.Pension=jizhun*0.08
            this.yiliao=jizhun*0.02
            this.shiye=jizhun*0.005

            var sanxian = jizhun * (0.08 + 0.02 + 0.005 + 0.08);
            // 4.扣除三一金后的月收入
            this.kouchusanxian = gongzi - sanxian;
            // 5.应纳税所得额
            var suodee = this.kouchusanxian - 5000;
            // 6.税率 速算扣除数
            var shuilv, sukou;
            if (suodee <= 0) {
              return this.geshui="您还未达到缴税标准，请回家涨涨工资再来！";
            } else {
              if (suodee <= 3000) {
                shuilv = 0.03;
                sukou = 0;
              }
              else if (suodee <= 12000) {
                shuilv = 0.1;
                sukou = 210;
              }
              else if (suodee <= 25000) {
                shuilv = 0.2;
                sukou = 1410;
              } else if (suodee <= 35000) {
                shuilv = 0.25;
                sukou = 2660;
              } else if (suodee <= 55000) {
                shuilv = 0.3;
                sukou = 4410;
              } else if (suodee <= 80000) {
                shuilv = 0.35;
                sukou = 7160;
              } else {
                shuilv = 0.45;
                sukou = 15160;
              }
              // 7.个人所得税
              this.shuihou=(this.kouchusanxian-this.geshui)*1
             return  this.geshui = (suodee * shuilv - sukou).toFixed(2);
            }

            
          },





        },
      });


      


    </script>
  </body>
</html>
